<template>
  <div>
    <business-moban>
      <template #one>
        <el-form>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="订单编号">
                  <el-input
                    style="width: 70%"
                    v-model="formData.id"
                    placeholder="请输入订单编号"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="订单状态">
                  <el-select style="width: 288px" v-model="OrderStatus">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="付费状态">
                  <el-select style="width: 288px" v-model="FufeiStatus">
                    <el-option
                      v-for="item in options1"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="发件人姓名">
                  <el-input
                    style="width: 70%"
                    v-model="formData.id"
                    placeholder="请输入发件人姓名"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="发件人电话">
                  <el-input
                    style="width: 70%"
                    placeholder="请输入发件人电话"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="发件人地址">
                  <el-select
                    clearable
                    style="width: 90px; margin-right: 7px"
                    v-model="sender.Province"
                    @change="SelectSender"
                  >
                    <el-option
                      v-for="item in Province1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-select
                    clearable
                    style="width: 90px; margin-right: 7px"
                    v-model="sender.City"
                    @change="SelectSender"
                  >
                    <el-option
                      v-for="item in City1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-select
                    clearable
                    style="width: 90px; margin-right: 7px"
                    v-model="sender.Country"
                    @change="SelectSender"
                  >
                    <el-option
                      v-for="item in Country1"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="收件人姓名">
                  <el-input
                    style="width: 70%"
                    v-model="formData.id"
                    placeholder="请输入收件人姓名"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="收件人电话">
                  <el-input
                    style="width: 70%"
                    placeholder="请输入收件人电话"
                  ></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="8"
              ><div class="grid-content bg-purple">
                <el-form-item label="收件人地址">
                  <el-select
                    clearable
                    style="width: 90px; margin-right: 7px"
                    v-model="receiver.Province"
                    @change="SelectReceiver"
                  >
                    <el-option
                      v-for="item in Province"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-select
                    clearable
                    style="width: 90px; margin-right: 7px"
                    v-model="receiver.City"
                    @change="SelectReceiver"
                  >
                    <el-option
                      v-for="item in City"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                  <el-select
                    clearable
                    style="width: 90px; margin-right: 7px"
                    v-model="receiver.Country"
                    @change="SelectReceiver"
                  >
                    <el-option
                      v-for="item in Country"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>
          <el-row>
            <el-col>
              <el-button
                style="margin-left: 15px"
                type="primary"
                @click="submit"
                >搜索</el-button
              >
              <el-button @click="chongzhi">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </business-moban>
    <!--    <OrderTable :page="page" :total="total" :tableDate="tableDate">-->
    <el-row style="margin-top: 20px">
      <el-card>
        <el-col>
          <el-table
            border
            stripe
            style="text-align: center; margin-top: 15px; margin-bottom: 20px"
            :data="tableDate"
          >
            <template slot="empty">
              <img
                src="https://slwl-admin.itheima.net/static/img/icon-empty.3abd3b9a.png"
                alt=""
                srcset=""
              />
            </template>
            <el-table-column
              type="index"
              width="50"
              label="序号"
            ></el-table-column>
            <el-table-column
              width="190"
              prop="id"
              label="订单编号"
            ></el-table-column>
            <el-table-column
              prop="transportOrder.id"
              width="160"
              label="运单编号"
            ></el-table-column>
            <el-table-column
              width="160"
              prop="estimatedStartTime"
              label="下单时间"
            ></el-table-column>
            <el-table-column width="160" label="订单状态">
              <template #default="{ row }">
                {{ statusMap[row.status] }}
              </template>
            </el-table-column>
            <el-table-column prop="senderName" width="160" label="发件人姓名">
            </el-table-column>
            <el-table-column prop="senderPhone" width="160" label="发件人电话">
            </el-table-column>
            <el-table-column width="160" label="发件人地址">
              <template #default="{ row }">
                {{ row.senderProvince.name }}
                {{ row.senderCity.name }}
                {{ row.senderCounty.name }}
                {{ row.senderAddress }}
              </template>
            </el-table-column>
            <el-table-column prop="receiverName" width="160" label="收件人姓名">
            </el-table-column>
            <el-table-column
              prop="receiverPhone"
              width="160"
              label="收件人电话"
            >
            </el-table-column>
            <el-table-column width="160" label="收件人地址">
              <template #default="{ row }">
                {{ row.receiverProvince.name }}
                {{ row.receiverCity.name }}
                {{ row.receiverCounty.name }}
                {{ row.receiverAddress }}
              </template>
            </el-table-column>
            <el-table-column prop="pickupType" width="160" label="取件类型">
              {{ "上门取件" }}
            </el-table-column>
            <el-table-column width="160" label="付费类型">
              <template #default="{ row }">
                {{ row.paymentMethod === 1 ? "预结" : "到付" }}
              </template>
            </el-table-column>
            <el-table-column width="160" label="付费状态">
              <template #default="{ row }">
                {{ row.paymentStatus === 1 ? "未付" : "已付" }}
              </template>
            </el-table-column>
            <el-table-column prop="" label="操作" fixed="right" width="140">
              <template #default="{ row }">
                <el-button
                  @click="tiao(row.id)"
                  style="color: deepskyblue"
                  type="text"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-bottom: 20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.page.page"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="this.page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-card>
    </el-row>
    <!--    </OrderTable>-->
  </div>
</template>

<script>
import { getCityListApi, getOrderListApi } from "@/api/business";
import BusinessMoban from "@/views/business/components/businessMoban.vue";
// import BusinessTable from "@/views/business/components/businessTable.vue";
// import OrderTable from "@/views/business/components/OrderTable.vue";

export default {
  components: { BusinessMoban },
  data() {
    return {
      senderAndreceiver: {
        receiver: "",
        sender: "",
      },
      sender: {
        Province: "",
        City: "",
        Country: "",
      },
      Province1: [],
      City1: [],
      Country1: [],
      receiver: {
        Province: "",
        City: "",
        Country: "",
      },
      Province: [],
      City: [],
      Country: [],
      OrderStatus: "",
      FufeiStatus: "",
      formData: [],
      tableDate: [],
      total: 100,
      statusMap: {
        23000: "待取件",
        23001: "已取件",
        23005: "运输中",
        23008: "派送中",
        23009: "已签收",
        23010: "拒收",
        23011: "已取消",
      },
      options: [
        { value: 23000, label: "待取件" },
        { value: 23001, label: "已取件" },
        { value: 23005, label: "运输中" },
        { value: 23008, label: "派送中" },
        { value: 23009, label: "已签收" },
        { value: 23010, label: "拒收" },
        { value: 23011, label: "已取消" },
      ],
      options1: [
        { value: 1, label: "未付" },
        { value: 2, label: "已付" },
      ],
      page: {
        page: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getOrderListInfo();
  },
  methods: {
    submit() {},
    chongzhi() {},
    async SelectSender() {
      console.log(this.sender);
      if (this.sender.Province === "") {
        this.City1 = [];
        this.Country1 = [];
        this.receiver = {
          Province: "",
          City: "",
          Country: "",
        };
      } else if (this.sender.City === "") {
        this.Country1 = [];
        this.sender = {
          Province: this.sender.Province,
          City: "",
          Country: "",
        };
      }
      if (
        this.sender.Province &&
        this.sender.City === "" &&
        this.sender.Country === ""
      ) {
        const res = await getCityListApi(this.sender.Province);
        this.City1 = res.data.data;
      } else if (this.sender.City && this.sender.Country === "") {
        const res1 = await getCityListApi(this.sender.City);
        this.Country1 = res1.data.data;
      }
    },
    async SelectReceiver() {
      console.log(this.receiver);
      if (this.receiver.Province === "") {
        this.City = [];
        this.Country = [];
        this.receiver = {
          Province: "",
          City: "",
          Country: "",
        };
      } else if (this.receiver.City === "") {
        this.Country = [];
        this.receiver = {
          Province: this.receiver.Province,
          City: "",
          Country: "",
        };
      }
      if (
        this.receiver.Province &&
        this.receiver.City === "" &&
        this.receiver.Country === ""
      ) {
        const res = await getCityListApi(this.receiver.Province);
        this.City = res.data.data;
      } else if (this.receiver.City && this.receiver.Country === "") {
        const res1 = await getCityListApi(this.receiver.City);
        this.Country = res1.data.data;
      }
    },
    tiao(id) {
      console.log(id);
      this.$router.push(`/orderXiang/${id}`);
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getOrderListInfo();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getOrderListInfo();
    },
    async getOrderListInfo() {
      const res = await getOrderListApi(this.page);
      console.log(res.data.data);
      this.tableDate = res.data.data.items;
      this.total = +res.data.data.counts;
      const res1 = await getCityListApi(0);
      console.log(res1.data.data);
      this.Province = res1.data.data;
      this.Province1 = res1.data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  ::v-deep .el-form-item__label {
    width: 96px;
  }
}
.el-pagination {
  text-align: center;
}
.el-table .cell .span1 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: red;
  border-radius: 50%;
  margin-right: 4px;
}
.el-table .cell .span2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: rgb(29, 199, 121);
  border-radius: 50%;
  margin-right: 4px;
}
</style>
